<template>
  <view>
    <u-swiper height="500rpx" :list="list"></u-swiper>
    <view class="remark py-16 px-20 h-87 text-14 color-gray">
      <view class="ellipsis-3">
        {{ specialColumn.name || miActivity.name }}
      </view>
    </view>
    <view class="content mt-12">
      <!-- <view class="title-box py-16">
				<view class="content-title"> {{ title }} </view>
			</view>
			<view class="px-16 flex-col my-16 gap-16">
				<u-image v-for="item in imgList" width="682rpx" :src="item" height="auto" mode="widthFix"></u-image>
			</view> -->
      <view class="goodsList mt-16 px-16 pt-4 pb-16">
        <u-empty v-if="isEmpty(goodsList)"> </u-empty>
        <GoodsRowItem
          v-for="(item, index) in goodsList"
          :data="item"
          :key="index"
          :img-width="'340rpx'"
          :img-height="'340rpx'"
        />
      </view>
    </view>
  </view>
</template>

<script>
import {
  fetchMiActivityGoodsList,
  fetchGoodsSpecialColumnGoodsList,
} from "@/services/api";
import GoodsRowItem from "@/components/goods-row-item/index.vue";
import { isEmpty } from "@/utils";
export default {
  components: {
    GoodsRowItem,
  },
  data() {
    return {
      // 专栏封面图片集合
      list: [],
      imgList: [],
      title: "",
      serialNo: "",
      type: "",
      goodsList: [],
      miActivity: {},
      specialColumn: {},
    };
  },
  methods: {
    isEmpty,
    // 根据类型和ID查询专栏 活动及商品信息
    async getMiActivityGoodsList() {
      const { data, error } = await fetchMiActivityGoodsList({
        serialNo: this.serialNo,
      });
      if (!error) {
        this.goodsList = data?.goodsList;
        this.miActivity = data?.miActivity;
        this.list = [data?.miActivity?.activityImg];
      }
    },
    async getGoodsSpecialColumnGoodsList() {
      const { data, error } = await fetchGoodsSpecialColumnGoodsList({
        serialNo: this.serialNo,
      });
      if (!error) {
        this.goodsList = data?.goodsList;
        this.specialColumn = data?.goodsSpecialColumn;
        this.list = [data?.goodsSpecialColumn?.coverImage];
      }
    },
  },
  onLoad(options) {
    console.log(options.serialNo);
    console.log(options.type);

    this.type = options.type;
    this.serialNo = options.serialNo;
    if (options.title) {
      this.title = options.title;
      uni.setNavigationBarTitle({
        title: options.title,
      });
    }
  },
  mounted() {
    if (this.type == "specialColumn") {
      // 查询专栏
      console.log("查询专栏");
      this.getGoodsSpecialColumnGoodsList();
    } else if (this.type == "activity") {
      // 查询活动
      console.log("查询活动");
      this.getMiActivityGoodsList();
    }
  },
};
</script>
<style>
page {
  background-color: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.remark {
  background: white;
  box-sizing: border-box;
}

.content {
  .content-title {
    font-size: 48rpx;
    color: #333333;
    font-weight: bold;
    margin-left: 32rpx;
    padding-left: 20rpx;
    position: relative;
  }

  .content-title::after {
    left: 0;
    top: 10rpx;
    position: absolute;
    content: "";
    display: block;
    width: 4px;
    height: 48rpx;
    background: #5eb496;
  }

  .title-box {
    background: white;
  }

  .goodsList {
    background: white;
  }
}
</style>
